<template>
  <div id="resultScroll" ref="myScrollbar" style="overflow: auto;">
   <ul>
      <li class="list" v-for="t in depts" :key="t.id">
        <!-- 左侧图片 -->
        <div class="list-l">
            <img :src="t.img.replace('/w.h/','/')" />
        </div>
        <!-- 右侧部分 -->
        <div class="list-r">
            <div class="list-t">
                <h3 class="h">{{t.nm}}</h3>
                <my-tip>
                    <template v-slot>
                        {{t.wish}}
                        <span>人想看</span>
                    </template>
                </my-tip>
            </div>
            <div class="list-b">
                <div>
                    <p>{{t.cat}}</p>
                    <p>{{t.desc}}</p>
                    <p>{{t.showTimeInfo}}</p>
                </div>
                <my-button type="danger">预售</my-button>
            </div>
        </div>
    </li>
   </ul>
  </div>
</template>

<script>
import MyTip from "../../components/MyTip"
  import MyButton from "../../components/MyButton"
  import {
    mapState,
    mapActions,

  } from 'vuex'
  export default {
    data() {
      return {
        dept: this.queryData
      }
    },
    components: {
      MyTip,
      MyButton
    },
    computed: {
      ...mapState('department', ['depts', 'queryData'])
    },
    mounted() {
      this.getPageData()
      let that=this
      document.getElementById('resultScroll').addEventListener('scroll',that.handleScroll,true)
    },

    methods: {
      ...mapActions('department', ['getPageData', 'getPageDat']),
      handleScroll() {
        let that = this
        let sh = that.$refs['myScrollbar'].scrollHeight // 滚动条高度
        let st = that.$refs['myScrollbar'].scrollTop // 滚动条距离顶部的距离
        let ch = that.$refs['myScrollbar'].clientHeight // 滚动条外容器的高度
        console.log(sh, st, ch)
        if (st + ch >= sh) {
          // console.log(666)
          //到底了-业务逻辑
          that.queryData.offset += 1
          if (that.queryData.offset <= that.queryData.total) {
            that.getPageDat()
          }
        }
      },
      // getPageDat(){}
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/mixin.scss";

  .list {
    @include border-bottom-1px;
    padding: 0.12rem 0.12rem 0.12rem .12rem;
    display: flex;

    .list-l {
      margin-right: 0.1rem;

      img {
        height: .9rem;
        width: 0.64rem;
      }
    }

    .list-r {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .list-t {
        >h3 {
          font-size: .16rem
        }

        @include flex-layout(row, space-between);
      }

      .list-b {
        @include flex-layout(row, space-between);

        color: #666666;
        font-size: 0.14rem;

      

        // 超出部分使用省略号代替
        p {
          max-width: 2rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>